<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="./jquery.js"></script>
    <link rel="stylesheet" href="./css.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body style="font-family:'Microsoft Yahei', Helvetica, Arial, sans-serif; ">
<div class="bg">
    <div class="green">
        <a id="lwx2"><div style="float: left;margin-top: 5%;margin-left: 2%;">
            <img class="tw" src="./img/tw.png" alt=""/>
        </div></a>
        <div style="float: left;margin-left: 10%;margin-top: 6%;">
            <p class="w">姓名:刘汶鑫</p>
            <p class="w">出生年月:1994.2.3</p>
            <p class="w">联系电话:15681217105</p>
            <p class="w">邮箱地址:2671786048@qq.com</p>
        </div>
        <div style="margin-left: -75%;margin-top: 4%;">
            <img class="hd" style="width: 20%;margin-left:-60%;position:absolute;" src="./img/run.png" alt=""/>
        </div>
    </div>
    <div class="white">

    </div>
    <div class="red">
        <div class="c">
            <p>1</p>
            <p class="d">为何惊呼？点他了解</p>
            <p class="b">跨专业学习</p>
            <p class="b">更发散的思维</p>
            <img class="hj" src="./img/wa.png" alt=""/>
            <a id="lwx" ><img class="wa" src="./img/wa.png" alt=""/></a>
            <p class="e">为何再次惊呼？</p>
            <p class="f">这么趣的简历</p>
            <p class="f">丰满的作品集</p>
            <img id="lwx1" class="pen" src="./img/pen.png" alt=""/>
            <p class="e">在吐槽什么？</p>
            <p class="p">这么机智</p>
            <p class="p">您还犹豫什么</p>
            <p class="end">Thanks</p>
        </div>
        <div class="c">
            <p>2</p>
            <p class="d">为何惊呼？点他了解</p>
            <p class="b">不同职业经历</p>
            <p class="b">有更为宽广的眼界</p>
            <img class="hj" src="./img/wa.png" alt=""/>
            <img class="wa" src="./img/wa.png" alt=""/>
            <p class="e">为何再次惊呼？</p>
            <p class="f">掌握html/css</p>
            <p class="f">以及js还会PS</p>
            <img class="pen" src="./img/pen.png" alt=""/>
            <p class="e">在吐槽什么？</p>
            <p class="p">好谦虚</p>
            <p class="p">您还犹豫什么</p>
            <p class="end">For</p>
        </div>
        <div class="c">
            <p>3</p>
            <p class="d">为何惊呼？点他了解</p>
            <p class="b">毕业不久90后</p>
            <p class="b">上限高，潜力大</p>
            <img class="hj" src="./img/wa.png" alt=""/>
            <img class="wa" src="./img/wa.png" alt=""/>
            <p class="e">为何再次惊呼？</p>
            <p class="f">还可以做SEO</p>
            <p class="f">还有设计能力</p>
            <img class="pen" src="./img/pen.png" alt=""/>
            <p class="e">在吐槽什么？</p>
            <p class="p">好有趣</p>
            <p class="p">您还犹豫什么</p>
            <p class="end">Watching</p>
        </div>
        <div class="c">
            <p>4</p>
            <a href="#lwx"><img style="width:52%;" src="./img/huaji1.png" alt=""/></a>
            <p class="b">慢了一点</p>
            <p class="b">点我加油</p>
            <a href="#lwx1"><img style="width:52%;margin-top: 90%;" src="./img/haha.png" alt=""/></a>
            <p class="f">快追上啦</p>
            <p class="f">点我加油</p>
            <a href="#lwx2"><img class="k" style="width: 49%;margin-top: 180%;" src="./img/ku.png" alt=""/></a>
            <div class="final"></div>
            <p style="margin-top: 6%;font-size: 40px;color: white;    text-shadow: 1px 0 1px #00b060, 0 1px 1px #00b060,
    0 -1px 1px #00b060, -1px 0 1px #00b060;">END</p>
            <p style="margin-top: 1%;font-size: 40px;color: white;text-shadow: 1px 0 1px #00b060, 0 1px 1px #00b060,
    0 -1px 1px #00b060, -1px 0 1px #00b060;">点我回去</p>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function(){
        $(".hj").click(function(){
            $(".b").fadeIn("slow");
        });
        $(".wa").click(function(){
            $(".f").slideDown("slow");
        });
        $(".pen").click(function(){
            $(".p").slideDown("slow");
            $(".end").fadeIn(4400);
        });
        $(".w").fadeIn(2200);
        $(".tw").fadeIn(2200);
        $(".hd").animate({left:'130%'},"slow");
    });
    $(document).ready(function() {
        $('a[href*=#lwx],area[href*=#lwx]').click(function() {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var $target = $(this.hash);
                $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
                if ($target.length) {
                    var targetOffset = $target.offset().top;
                    $('html,body').animate({
                                scrollTop: targetOffset
                            },
                            1000);
                    return false;
                }
            }
        });
    });
</script>
</html>